<template>
    <div class="warp-2" style="height: 100%;">
        <navbar :title="$t('upload_registration_materials')"></navbar>
        <div class="content">
            <div class="info-warp" >
                <p class="title">{{$t('student_registration_form')}}：</p>
                <p class="name">{{currentObj.fileName}}</p>
                <div class="submit-btn">
                    <van-uploader :before-read="beforeUpload" :after-read="uploadFile" :preview-image="false" accept="image/*">
                        <van-button plain type="info" round :loading-text="$t('uploading') + '...'" size="small" :loading="isGoing" >{{ $t('select_file')}}</van-button>
                    </van-uploader>
                </div>
            </div>
        </div>
        <div class="bottom-btns">
            <div class="btns-box">
                <div class="cancel-btn btn" @click="$router.go(-1)">{{ $t('cancel') }}</div>
                <div class="submit btn" @click="upload">{{ $t('submit_application') }}</div>
            </div>
        </div>
        <common-loading :isLoading="isLoading"></common-loading>
    </div>
</template>

<script>
import CommonLoading from '@/components/common/loading';
import { Toast } from 'vant';
export default {
    components: {
        CommonLoading,
        vanToast: Toast
    },
    data() {
        return {
            isLoading: false,
            itmId: this.$route.params.itmId,
            signUpReqData: {
                itmId: this.$route.params.itmId,
                paths: [] // 学员登记表地址
            },
            currentObj: {
                fileName: ''
            }, // 已上传文件
            isGoing: false // 是否正在上传文件
        };
    },
    methods: {
        /**
         * 上传图片前校验格式
         * */
        beforeUpload(file) {
            const rule = /\.(jpg|jpeg|png|JPG|PNG|JPEG)$/;
            // 判断是否是多文件上传
            if (file instanceof Array && file.length) {
                for (let i = 0; i < file.length; i++) {
                    if (!rule.test(file[i].name)) {
                        Toast.fail(this.$t('upload_tips'));
                        return false;
                    }
                }
            } else {
                if (!rule.test(file.name)) {
                    Toast.fail(this.$t('upload_tips'));
                    return false;
                }
            }
            return true;
        },
        /**
         * 上传文件至服务器
         * */
        uploadFile(file) {
            this.isGoing = true;
            const formData = new FormData();
            formData.append('file', file.file);
            this.$axios({
                method: 'POST',
                url: '/app/api/file',
                data: formData
            }).then(res => {
                this.currentObj = res.data;
                this.signUpReqData.paths = [res.data.url];
                this.isGoing = false;
            }).catch(() => {
                this.isGoing = false;
                Toast.fail(this.$t('upload_failed'));
            });
        },
        /**
         * 提交申请 */
        upload() {
            if (!this.currentObj.fileName) {
                Toast.fail(this.$t('upload_student_registration_form'));
            } else {
                this.$axios({
                    method: 'POST',
                    url: '/app/api/trainee/user/apply/submit',
                    data: this.signUpReqData
                }).then(res => {
                    Toast.success(this.$t('registration_successful'));
                    this.$router.go(-1);
                });
            }
        }
    },
    filters: {
    },
    mounted() {
    }
};
</script>

<style scoped lang="less">
    .info-warp{
        background: #fff;
        padding: 15px;
        .title{
            margin-bottom: 10px;
        }
        .name{
            min-height: 60px;
            margin-bottom: 10px;
            color:#075ebb
        }
        .submit-btn{
            text-align: center;
            /deep/.van-button{
                padding: 6px 18px;
            }
        }
    }
    .bottom-btns{
        position: fixed;
        bottom: 0;
        left: 0;
        height: 56px;
        width: 100%;
        background: #fff;
        border-top: 1px solid #eee;
        padding: 10px 15px;
        box-sizing: border-box;
        .btns-box{
            display: flex;
            .btn{
                border-radius: 20px;
                padding: 7px 25px;
            }
            .submit{
                margin-left: 15px;
                flex: 1;
                width: 100px;
                text-align: center;
                color:#fff;
                background: #075ebb;
            }
            .cancel-btn{
                flex-shrink: 0;
                border: 1px solid #075ebb;
                color: #075ebb;
                background: #fff;
            }
        }
    }
</style>
